<template>
<div class="create-shops views-container">
  <div class="wlm-form">
    <div class="wlm-form-header flex-row flex-justify-b">
      <div class="header-inline">
         <router-link tag="span" to="/create-shops/storeType"><el-button size="small" type="primary">创建平台</el-button></router-link>
      </div>
      <div class="select-nav flex-row">
        <label >筛选：</label>
        <p><span v-for="(item, index) in shopselect" :key="index" @click="selectChange(index)" v-bind:class="{active:item.active}">{{item.name}}</span></p>
      </div>
    </div>
    <div class="wlm-form-content">
      <el-row :gutter="50">
        <el-col :span="6">
          <div class="shoplist-item flex-row flex-justify-b">
            <div class="shoplist-item-left flex-col flex-justify-c">
              <div class="shop-name">西风店</div>
              <div class="shoplist-label bg-green">门店</div>
              <div class="shoplist-time">剩余198天</div>
            </div>
            <div class="shoplist-item-right">
              <el-tag>运营中</el-tag>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="shoplist-item flex-row flex-justify-b">
            <div class="shoplist-item-left flex-col flex-justify-c">
              <div class="shop-name">西风店</div>
              <div class="shoplist-label bg-blue">企业</div>
              <div class="shoplist-time">剩余198天</div>
            </div>
            <div class="shoplist-item-right">
              <el-tag>运营中</el-tag>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="shoplist-item flex-row flex-justify-b">
            <div class="shoplist-item-left flex-col flex-justify-c">
              <div class="shop-name">西风店</div>
              <div class="shoplist-label bg-yellow">餐饮</div>
              <div class="shoplist-time">剩余198天</div>
            </div>
            <div class="shoplist-item-right">
              <el-tag>运营中</el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'CreateShops',
  components: {

  },
  data() {
    return {
      testFrom: [{
        text: 'ff'
      }],
      input: 'kk',
      value7: '',
      options: [],
      shopselect: [{
        name: '所有平台',
        active: true
      }, {
        name: '企业',
        active: false
      }]
    }
  },
  methods: {
    selectChange(index) {
      this.shopselect.map((item, idx) => {
        item.active = false
        if (idx === index) {
          item.active = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.create-shops {
  .shoplist-item {
    height: 150px;
    border-radius: 6px;
    padding: 20px 25px;
    border: 1px solid #f1f1f2;
    margin-bottom: 24px;
  }

  .shoplist-item:hover {
    background: #f8f8fa;
    cursor: pointer;
  }

  .shoplist-item-left {
    width: 70%;
    padding: 10px;
    font-size: 14px;
  }

  .shoplist-time {
    margin-top: 10px;
    color: #999;
  }

  .shop-name {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .shoplist-label {
    height: 25px;
    line-height: 25px;
    width: 52px;
    text-align: center;
    display: inline-block;
    border-radius: 2px;
    color: #fff;
  }

  .bg-green {
    background-color: #43caae
  }

  .bg-yellow {
    background-color: #f77a5b;
  }

  .bg-blue {
    background-color: #00acec;
  }

  .select-nav {
    max-width: 1000px;
    color: #181616;
    line-height: 32px;
    padding: 20px;
    font-weight: normal;
    font-size: 16px;
  }
  .select-nav label{
    color: #181616;
  }

  .select-nav p span {
    padding: 10px 15px;
    color: #666;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .select-nav p span.active {
    border-radius: 2px;
    border: 1px solid #d7d7d4;
    background-color: #f9f9f9;
  }
  .header-inline{
    display: inline-block;
    padding: 20px 0;
  }
}
</style>
